$(function () {
    // 图表1 初始化
  
    // 1-初始化echarts实例-指定图表父容器 
    var myChart1 = echarts.init(document.getElementById('c1'));
  
    // 2-指定图表的数据 和 设置 
    var option1 = {
      // 标题
      title: {
        text: '2020年注册人数'
      },
      // 提示工具 
      tooltip: {},
      // 图例
      legend: {
        data: ['销量', '注册人数']
      },
      // x轴
      xAxis: {
        data: ["一月", "二月", "三月", "四月", "五月", "六月"]
      },
      // y轴：一般不用设置，会根据数据智能的生成
      yAxis: {},
      // 系列
      series: [
        {
          name: '销量',
          type: 'bar',  //bar 柱图  line 线图 pie 饼图 
          data: [5, 20, 36, 15, 10, 20]
        },
        {
          name: '注册人数',
          type: 'line',  //bar 柱图  line 线图 pie 饼图 
          data: [15, 30, 6, 12, 15, 22]
        }
      ]
    };
  
    // 3- 把数据交给eaharts实例进行绘制  
    myChart1.setOption(option1);
  
  
    // 图表1 初始化
  
    // 1-初始化echarts实例-指定图表父容器 
    var myChart2 = echarts.init(document.getElementById('c2'));
  
    // 2-指定图表的数据 和 设置 
    var option2 = {
      title: {
        text: '热门品牌销售',
        subtext: '权威数据',
        x: 'right'
      },
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['耐克', '阿迪', '老北京布鞋', '人字拖', '李宁']
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '60%',
          center: ['50%', '50%'],
          data: [
            { value: 335, name: '耐克' },
            { value: 310, name: '阿迪' },
            { value: 234, name: '老北京布鞋' },
            { value: 135, name: '人字拖' },
            { value: 1548, name: '李宁' }
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
  
    // 3- 把数据交给eaharts实例进行绘制  
    myChart2.setOption(option2);
  });